<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{插值写法:要求要有返回值，不然就会报错}} -->
        {{ 1 }}
        {{ '我是内容' }}
        {{ {name:'zhu'} }}
        {{ [1,2,3] }}
        {{ true }}
        {{ (function(){return 150})() }}
        <!-- 值类型：数字，字符串，布尔值，对象，数组，还有返回值的函数调用，表达式 -->
        {{ 1+1 }}
        <!-- 插值写法等价于v-text -->
        <h1 v-text='msg + txt'></h1>
        <h2 v-text='100*100'></h2>
        <!-- v-text和{{}}都只是渲染文本 innerText -->
        <!-- v-html渲染字符串类型的dom片段，留言系统，小说详情等 -->
        <div v-html='strDom'></div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                strDom:'<h1>某宝</h2>',
               msg:'我是一个内容',
               txt:'另一个内容'
            }
        })
    </script>
</body>
</html>